<template>
  <div class="assess-system">
    <el-card class="box-card assess-system-type">
      <template #header>
        <div class="card-header">
          <span>指标体系列表</span>
        </div>
      </template>
      <system-type :status="status"></system-type>
    </el-card>

    <el-card class="box-card assess-system-data">
      <template #header>
        <div class="card-header">
          <span>{{ title }}</span>
        </div>
      </template>
      <system-data class="assess-system-data" :status="status"
        v-if="status.systemTypeData.systemType == 'assess_node_type_data'"></system-data>
      <systemTypeBasicInformation :status="status"
        v-else-if="status.systemTypeData.systemType == 'assess_node_type_group'">
      </systemTypeBasicInformation>
      <div v-else>请双击体系类别树中数据以编辑指标体系</div>
    </el-card>
  </div>
</template>
<script setup lang="ts" title="SystemIndex">
import { SystemTypeForm } from '@/api/assess/system/systemType/types';
import Split from 'split.js';
import systemData from "./systemData/index.vue";
import systemTypeBasicInformation from "./systemType/basic-information.vue";
import SystemType from './systemType/index.vue';

// 体系类别
const systemTypeData: SystemTypeForm = {}
const status = ref({
  systemTypeData: systemTypeData
});

const title = computed(() => {
  if (!status.value.systemTypeData) {
    return "操作提示";
  }
  else if (status.value.systemTypeData.systemType == 'assess_node_type_data') {
    return "指标体系详情";
  } else if (status.value.systemTypeData.systemType == 'assess_node_type_group') {
    return "体系分组信息";
  }
})
onMounted(() => {
  Split(['.assess-system-type', '.assess-system-data'], {
    sizes: [30, 70],
    minSize: 400,
    gutterSize: 5,
    expandToMin: true,
    direction: 'horizontal'
  })
})
</script>
<style>
.assess-system {
  display: flex;
  height: calc(100vh - 84px);
}

.assess-system>div {
  height: 100%;
  overflow-y: auto;
  border: 1px solid #EEE;
}
</style>
